<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
        }

        .wrapper {
            position: relative;
            width: 400px;
            height: 400px;
            background: #fff url('../imgs/clock.png') no-repeat center;
            background-size: 100% 100%;
        }

        .hour-hand,
        .minute-hand,
        .second-hand {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 50%;
            margin: auto;
            transform-origin: bottom center;
            border-radius: 4px;
        }

        .hour-hand {
            width: 6px;
            height: 100px;
            background-color: #333;
            z-index: 3;
        }

        .minute-hand {
            width: 4px;
            height: 116px;
            background-color: #333;
            z-index: 2;
        }

        .second-hand {
            width: 2px;
            height: 120px;
            background-color: #f01414;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrapper">
            <div class="hour-hand"></div>
            <div class="minute-hand"></div>
            <div class="second-hand"></div>
        </div>
    </div>
</body>
<script>
    // 圆形时钟: 对应时分秒  -> 将时针 分针 秒针 旋转对应的角度 transform:ratate(360deg)

    // 时针  1小时 => 360 / 12 ->  30deg
    // 分针  1分钟 => 360 / 60 ->  6deg
    // 秒针  1秒针 => 360 / 60 ->  6deg

    // 1. 对应class名获取元素 ->元素的集合  2. 单元素 -> 默认取[0]第一个元素
    var hourHand = document.getElementsByClassName("hour-hand")[0];
    var minuteHand = document.getElementsByClassName("minute-hand")[0];
    var secondHand = document.getElementsByClassName("second-hand")[0];



    showTime();
    setInterval(showTime, 1000);

    function showTime() {
        var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        // 时针除了自己的 + 对应比例跟着分钟动
        // 分钟除了自己的 + 对应比例跟着秒钟动
        hourHand.style.transform = `rotate(${hour * 30 + (minute / 60) * 30}deg)`;
        minuteHand.style.transform = `rotate(${minute * 6 + (second / 60) * 6}deg)`;
        secondHand.style.transform = `rotate(${second * 6}deg)`;

    }
    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }


</script>

</html>